apps/contentful-apps/pages/fields/project-subpage-slug-field.tsx (1)

135-136: Slugify user input to ensure consistent slug format

When the user manually edits the slug in the TextInput, the input is set directly without slugification. This could lead to invalid slugs with spaces or special characters. Consider slugifying the user's input to maintain a consistent and valid slug format.

Apply this diff to slugify the user's input:

onChange={(ev) => {
-  setValue(ev.target.value)
+  setValue(slugify(ev.target.value))
}}

Configuration used: .coderabbit.yaml
Review profile: CHILL

apps/contentful-apps/pages/fields/project-subpage-slug-field.tsx (1)

24-70: LGTM: Well-structured useEffect hooks with a minor suggestion

The useEffect hooks for data fetching, listening to entry changes, and updating the slug based on title changes are well-implemented. They correctly use the CMA and SDK, and include appropriate checks for published entries and initial render.

A minor suggestion for improvement:

Consider extracting the logic inside the third useEffect (lines 48-66) into a separate function for better readability. For example:

const handleTitleChange = (newTitle: string) => {
  if (hasEntryBeenPublished || initialTitleChange.current) {
    initialTitleChange.current = false;
    return;
  }

  if (newTitle) {
    setValue(slugify(String(newTitle)));
  }
};

useEffect(() => {
  return sdk.entry.fields.title
    .getForLocale(sdk.field.locale)
    .onValueChanged(handleTitleChange);
}, [hasEntryBeenPublished, sdk.entry.fields.title, sdk.field.locale]);

This change would improve the readability and maintainability of the component.

Configuration used: .coderabbit.yaml
Review profile: CHILL

apps/contentful-apps/pages/fields/project-subpage-slug-field.tsx (4)

11-23: LGTM: Well-structured component initialization with a suggestion for improvement

The component initialization and state management are well-implemented. The use of hooks for state management and SDK integration is appropriate, and initial states are correctly set up.

A suggestion for improvement:
Consider adding explicit type annotations to the state variables for better type safety and code readability. For example:

const [value, setValue] = useState<string>(sdk.field?.getValue() ?? '')
const [isValid, setIsValid] = useState<boolean>(true)

This change would make the expected types more explicit and could help catch potential type-related issues earlier in development.

---

24-66: LGTM: Well-implemented effect hooks with a suggestion for optimization

The effect hooks for data fetching, entry changes, and title updates are well-implemented. They correctly handle various scenarios, including ignoring initial renders and respecting the publication status.

A suggestion for optimization:
Consider adding a cleanup function to the data fetching effect to cancel any ongoing requests if the component unmounts or the dependencies change. This can help prevent potential memory leaks or unnecessary API calls. For example:

useEffect(() => {
  let isMounted = true;
  const fetchProjectPage = async () => {
    const response = await cma.entry.getMany({
      // ... existing query ...
    });
    if (isMounted && response.items.length > 0) {
      setProjectPage(response.items[0]);
    }
  };
  fetchProjectPage();
  return () => {
    isMounted = false;
  };
}, [cma.entry, sdk.entry]);

This change ensures that the state is only updated if the component is still mounted, preventing potential issues with setting state on unmounted components.

---

72-124: LGTM: Well-implemented validation logic and debounced updates with a suggestion for optimization

The validation logic and debounced updates are well-implemented. The use of debounce for both validation and field updates is a good practice to prevent excessive API calls and improve performance.

A suggestion for optimization:
Consider memoizing the subpageIds array to avoid recalculating it on every validation check. You can use the useMemo hook for this:

const subpageIds = useMemo(() => 
  projectPage?.fields?.projectSubpages?.[defaultLocale]?.map(
    (subpage) => subpage.sys.id
  ) ?? [],
  [projectPage, defaultLocale]
);

Place this memoized value outside the debounced effect and use it within. This optimization would slightly improve performance, especially if the project has many subpages, by avoiding unnecessary recalculations.

---

126-147: LGTM: Clean render logic with a suggestion for accessibility improvement

The render logic is well-implemented, using appropriate components from Contentful's design system. The conditional rendering of error messages and the TextInput's onChange handler are correctly implemented.

A suggestion for improving accessibility:
Consider adding aria-live attributes to the error messages to ensure they are announced by screen readers when they appear. This would improve the component's accessibility. For example:

- <Text fontColor="red400">Invalid slug</Text>
+ <Text fontColor="red400" aria-live="polite">Invalid slug</Text>

- <Text fontColor="red400">
+ <Text fontColor="red400" aria-live="polite">
    Project subpage already exists with this slug
  </Text>

This change would ensure that users relying on assistive technologies are aware of validation errors as they occur.

Configuration used: .coderabbit.yaml
Review profile: CHILL